/**高亮渐暗 */
@keyframes stk-table-dim {
    from {
        background-color: var(--highlight-color);
    }
}

.stk-table {
    /* contain: strict;*/
    --row-height: 28px;
    --header-row-height: var(--row-height);
    --cell-padding-y: 0;
    --cell-padding-x: 8px;
    --resize-handle-width: 4px;
    --border-color: #e8e8f4;
    --border-width: 1px;
    --td-bgc: #fff;
    --td-hover-color: #71a2fd;
    --td-active-color: #386ccc;
    --th-bgc: #f1f1f9;
    --th-color: #272841;
    --tr-active-bgc: rgb(230, 247, 255);
    --tr-hover-bgc: rgba(230, 247, 255, 0.7);
    --bg-border-top: linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
    --bg-border-right: linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
    --bg-border-bottom: linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
    --bg-border-left: linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
    --highlight-color: #71a2fd;
    --highlight-duration: 2s;
    --highlight-timing-function: linear;
    /* 斑马纹颜色*/
    --stripe-bgc: #fafafc;

    --sort-arrow-color: #757699;
    --sort-arrow-hover-color: #8f90b5;
    --sort-arrow-active-color: #1b63d9;
    --sort-arrow-active-sub-color: #cbcbe1;

    --fold-icon-color: #757699;
    --fold-icon-hover-color: #8f90b5;
    /** 列宽拖动指示器颜色 */
    --col-resize-indicator-color: #87879c;

    /** 固定列阴影颜色 */
    --fixed-col-shadow-color-from: rgba(0, 0, 0, 0.1);
    --fixed-col-shadow-color-to: rgba(0, 0, 0, 0);

    /** 拖动行hover背景 */
    --drag-handle-hover-color: #d0d1e0;

    position: relative;
    overflow: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    /**深色模式 */
    &.dark {
        --th-bgc: #202029;
        --th-color: #c0c0d1;
        --td-bgc: #1b1b24;
        --td-hover-color: #70a6ff;
        --td-active-color: #386ccc;
        --border-color: #292933;
        --tr-active-bgc: #283f63;
        --tr-hover-bgc: #1a2b46;
        --table-bgc: #1b1b24;
        /* 不能用rgba，因为固定列时，会变成半透明*/
        --highlight-color: #1e4c99;

        --stripe-bgc: #202029;

        --sort-arrow-color: #5d6064;
        --sort-arrow-hover-color: #727782;
        --sort-arrow-active-color: #d0d1d2;
        --sort-arrow-active-sub-color: #5d6064;

        --fold-icon-color: #5d6064;
        --fold-icon-hover-color: #727782;

        --col-resize-indicator-color: #5d6064;

        --fixed-col-shadow-color-from: rgba(135, 135, 156, 0.1);
        --fixed-col-shadow-color-to: rgba(135, 135, 156, 0);

        --drag-handle-hover-color: #5d6064;

        /* background-color: var(--table-bgc); */
        /* ⭐这里加background-color会导致表格出滚动白屏*/
        color: #d1d1e0;
    }

    &.headless {
        &.bordered {
            border-top: 1px solid var(--border-color);
            background-image: var(--bg-border-right), var(--bg-border-bottom);
        }
    }

    /* 调整列宽的话，表格宽度应当自适应 */
    &.col-resizable {
        .stk-table-main {
            width: fit-content;
            min-width: min-content;
        }
    }

    /** 调整列宽的时候不要触发th事件。否则会导致触发表头点击排序 */
    &.is-col-resizing {
        th {
            pointer-events: none;
        }
    }

    &.bordered {
        /** 
        * border-left: 此方案用于减少cell 中border-left 的css选择。同时利于多级表头border-left问题。利于横向滚动border-left
        * - box-shadow inset 方案不生效，且占用属性。
        * - outline 方案绘制在图形外
        * - 绝对定位元素。需要根据滚动条位置动态计算。不合适。
        * - sticky 定位方案需要占用位置。高度为0。
        */
        border-left: 1px solid var(--border-color);
        /* 下面border用于表格内容不满高度时，绘制表格边界线 */
        background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);

        th,
        td {
            background-image: var(--bg-border-right), var(--bg-border-bottom);
        }

        thead tr:first-child th {
            background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
        }
    }

    &.bordered-h {
        border-left: none;
        --bg-border-right: linear-gradient(transparent, transparent);
        --bg-border-left: linear-gradient(transparent, transparent);
    }

    &.bordered-v {
        --bg-border-bottom: linear-gradient(transparent, transparent);
        --bg-border-top: linear-gradient(transparent, transparent);
    }

    &.bordered-body-v {
        tbody {
            --bg-border-bottom: linear-gradient(transparent, transparent);
        }
    }

    &.bordered-body-h {
        tbody {
            --bg-border-right: linear-gradient(transparent, transparent);
        }
    }

    &.stripe {
        &:not(.vt-on) .stk-tbody-main tr:nth-child(even) {
            background-color: var(--stripe-bgc);
        }

        &.vt-on .stk-tbody-main tr:nth-child(odd) {
            background-color: var(--stripe-bgc);
        }

        &.row-hover .stk-tbody-main tr:hover {
            background-color: var(--tr-hover-bgc);
        }

        &.row-active .stk-tbody-main tr.active {
            background-color: var(--tr-active-bgc);
        }
    }

    /** more weight for custom row background*/
    &.row-hover .stk-tbody-main tr:hover {
        background-color: var(--tr-hover-bgc);
    }

    &.row-active .stk-tbody-main tr.active {
        background-color: var(--tr-active-bgc);
    }

    /* 单元格悬浮 */
    &.cell-hover tbody td:hover {
        box-shadow: inset 0 0 0 2px var(--td-hover-color);
    }

    /* 单元格高亮 */
    &.cell-active tbody td.active {
        box-shadow: inset 0 0 0 2px var(--td-active-color);
    }

    /* td 溢出*/
    &.text-overflow {
        .table-cell-wrapper {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    /* th 溢出*/
    &.header-text-overflow {
        .table-header-cell-wrapper {
            white-space: nowrap;
            overflow: hidden;
        }

        .table-header-title {
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }

    /**虚拟滚动模式 */
    &.virtual {

        /* 为不影响布局，表头行高要定死*/
        .table-header-cell-wrapper {
            overflow: hidden;
            max-height: calc(var(--header-row-height) * var(--row-span, 1));

            .table-header-title {
                max-height: inherit;
            }
        }

        tbody td {
            height: var(--row-height);

            .table-cell-wrapper {
                max-height: var(--row-height);
                overflow: hidden;
            }
        }

        .padding-top-tr td {
            height: 0;
        }

        .expand-cell .table-cell-wrapper {
            white-space: nowrap;
        }

        // .expanded-row .table-cell-wrapper{
        //     overflow: auto;
        // }
    }

    &.auto-row-height {
        tbody td {
            height: unset;

            .table-cell-wrapper {
                max-height: unset;
                overflow: initial;
            }
        }
    }

    &.fixed-relative-mode {
        th {
            position: relative;
        }

        .fixed-cell--active {
            position: relative;
        }
    }

    &.scroll-row-by-row {
        .stk-table-main {
            position: sticky;
            top: 0;
        }
    }

    .row-by-row-table-height {
        width: 1px;
        flex-shrink: 0;
        position: absolute;
        left: 0;
        top: 0;
    }

    th,
    td {
        font-size: 14px;
        box-sizing: border-box;
        padding: var(--cell-padding-y) var(--cell-padding-x);
    }

    th {
        color: var(--th-color);
        background-color: inherit;
        /** 
         * 保证向上滚动时，表头不被遮挡。
         * z-index：2 为防止固定列阴影重叠。
         */
        z-index: 2;
        position: sticky;

        &.sortable {
            cursor: pointer;
        }

        &:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter {
            .arrow-up {
                fill: var(--sort-arrow-hover-color);
            }

            .arrow-down {
                fill: var(--sort-arrow-hover-color);
            }
        }

        &.sorter-desc .table-header-sorter {
            display: inline;

            .arrow-up {
                fill: var(--sort-arrow-active-sub-color);
            }

            .arrow-down {
                fill: var(--sort-arrow-active-color);
            }
        }

        &.sorter-asc .table-header-sorter {
            display: inline;

            .arrow-up {
                fill: var(--sort-arrow-active-color);
            }

            .arrow-down {
                fill: var(--sort-arrow-active-sub-color);
            }
        }
    }

    thead tr {
        background-color: var(--th-bgc);
        height: var(--header-row-height);
    }

    tbody tr {
        background-color: var(--td-bgc);
        height: var(--row-height);
    }

    .vt-x-left,
    .vt-x-right {
        padding: 0;
        background: none;
        pointer-events: none;
    }

    /** 列宽调整指示器 */
    .column-resize-indicator {
        width: 0;
        height: 100%;
        border-left: 2px solid var(--col-resize-indicator-color);
        position: absolute;
        z-index: 10;
        display: none;
        pointer-events: none;
    }

    .stk-table-main {
        border-spacing: 0;
        border-collapse: separate;
        width: fit-content;
        /* 不加会导致width 超过100%时为100%，行hover高亮会断开*/
        min-width: 100%;

        &.fixed-mode {
            table-layout: fixed;
            min-width: min-content;
        }
    }

    .fixed-cell {
        background-color: inherit;
    }

    .highlight-cell {
        animation-name: stk-table-dim;
        animation-duration:  var(--highlight-duration);
        animation-timing-function: var(--highlight-timing-function);
        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
    }

    .seq-column {
        text-align: center;
    }

    .drag-row-cell {
        .table-cell-wrapper {
            display: inline-flex;
            align-items: center;
        }

        .drag-row-handle {
            cursor: grab;
            border-radius: 4px;

            &:hover {
                background-color: var(--drag-handle-hover-color);
            }

            &:active {
                cursor: grabbing;
            }

            >svg {
                vertical-align: -2px;
            }
        }
    }

    .tr-dragging {
        opacity: 0.5;
    }

    .tr-dragging-over {
        background-color: var(--tr-hover-bgc);
    }

    /*固定列阴影-左*/
    .fixed-cell--left {
        --shadow-rotate: 90deg;

        &.fixed-cell--shadow::after {
            right: -10px;
        }
    }

    /*固定列阴影-右*/
    .fixed-cell--right {
        --shadow-rotate: -90deg;

        &.fixed-cell--shadow::after {
            left: -10px;
        }
    }

    /*固定列阴影*/
    .fixed-cell--shadow::after {
        content: '';
        width: 10px;
        height: 100%;
        top: 0px;
        position: absolute;
        pointer-events: none;
        background-image: linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
    }

    .fixed-cell--active {
        position: sticky;
    }

    th.fixed-cell--active {
        z-index: 3;
    }

    td.fixed-cell--active {
        z-index: 1;
    }

    .table-header-cell-wrapper {
        max-width: 100%;
        display: inline-flex;
        align-items: center;
    }

    .table-header-title {
        overflow: hidden;
    }

    .table-header-sorter {
        flex-shrink: 0;
        margin-left: 4px;
        width: 16px;
        height: 16px;
        display: none;

        .arrow-up,
        .arrow-down {
            fill: var(--sort-arrow-color);
        }
    }

    .table-header-resizer {
        position: absolute;
        top: 0;
        bottom: 0;
        cursor: col-resize;
        width: var(--resize-handle-width);

        &.left {
            left: 0;
        }

        &.right {
            right: 0;
        }
    }

    /* td inherit tr bgc*/
    .highlight-row {
        animation-name: stk-table-dim;
        animation-duration: var(--highlight-duration);
        /* 必须分开写，否则var(step(x))不兼容旧浏览器*/
        animation-timing-function: var(--highlight-timing-function);
    }

    .stk-table-no-data {
        background-color: var(--table-bgc);
        line-height: var(--row-height);
        text-align: center;
        font-size: 14px;
        position: sticky;
        left: 0px;
        border-right: var(--border-width) solid var(--border-color);
        border-bottom: var(--border-width) solid var(--border-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &.no-data-full {
            flex: 1;
        }
    }

    .expanded,
    .tree-expanded {
        >.table-cell-wrapper .stk-fold-icon::before {
            transform: rotate(90deg);
        }
    }


    .stk-fold-icon {
        display: inline-flex;
        width: 16px;
        height: 16px;
        cursor: pointer;
        align-items: center;

        &::before {
            content: '';
            display: block;
            margin: 0 2px;
            width: 0;
            height: 0;
            border-left: 5px solid var(--fold-icon-color);
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            transition: transform 0.2s ease;
        }

        &:hover::before {
            border-left: 5px solid var(--fold-icon-hover-color);
        }
    }

    td.cell-hover {
        background-color: var(--tr-hover-bgc);
    }
    
    td.cell-active {
        background-color: var(--tr-active-bgc);
    }

}